<template>
    <div class="container">
        {{msg}}
        <!-- 步骤三：调用子组件 -->
        <my-child :money="1000"></my-child> <!-- 给子组件传值 -->
        <my-child  ref="aaa"></my-child>
    </div>
</template>
<script>
  /* 
    快速原型开发： https://cli.vuejs.org/zh/guide/prototyping.html
    1. 首先：安装快速原型开发：
       npm install -g @vue/cli-service-global
    2. .html文件可以直接在浏览器打开，那.vue文件怎么办
       运行 ：在 .vue文件所在的文件夹路径下打开终端 
            vue serve 组件名称.vue -- 执行此命令的时候会自动安装 node_modules
    3. 快速原型开发的代码打包：
       vue build 组件名称.vue -- 执行此命令的时候会自动打包成一个dist文件夹
       然后在dist 文件夹中找到index.html,直接在浏览器打开：会报错
          因为打包后的index.html文件中引入的css/js等等 是前面有斜杠绝对地址， 例如： <link href="/js/app.55520466.js">
          原因是dist文件夹必须实在服务器的环境下去打开
          如果现在就是想在浏览器打开，就将绝对地址之前的/删掉，修改为相对地址就可以了
    4. Child.vue 文件 :就是一个子组件
    5. 这种开发模式基本不会用到
  */
// 步骤一：引入子组件：
import Child from './Child'
export default {
    data(){ // .vue的文件中是一个组件，组件中的data必须是一个函数，返回一个对象
        return {
           msg:'快速原型开发--父组件'
        }
    },
    // 步骤二：注册子组件：
    components:{
        'my-child':Child
    }
}
</script>
<style scoped>
   .container{
       background-color: brown;
       width:400px;
       height:400px;
   }
</style>
